<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <swiper
        :loop="true"
        :modules="modules"
        :slides-per-view="1"
        :space-between="0"
        :slidesPerView="3"
        :navigation="{
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }"
      >
        <swiper-slide
          v-for="carousel in imgList"
          :key="carousel.id"
          @mouseenter="currentImg(carousel.imgUrl, carousel.id)"
        >
          <img
            :src="carousel.imgUrl"
            :class="{ active: isActiveId === carousel.id }"
          />
        </swiper-slide>
      </swiper>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import { getCurrentInstance, computed, ref } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue'
import { Navigation, Pagination } from 'swiper'
import 'swiper/swiper-bundle.min.css'
export default {
  name: 'ImageList',
  components: { Swiper, SwiperSlide },
  props: ['imgList'],
  setup(props) {
    //isActive高亮边框
    const defaultList = computed(() => props.imgList[0] )
    const isActiveId = ref(defaultList.value.id)
    //联动Zoom组件中的img
    const $bus = getCurrentInstance().appContext.config.globalProperties.$bus
    function currentImg(currenturl, currentId) {
      $bus.emit('getCurrentImg', currenturl)
      isActiveId.value = currentId
    }
    return {
      modules: [Navigation, Pagination],
      currentImg,
      isActiveId,
      defaultList,
    }
  },
}
</script>

<style lang="less" scoped>
.swiper-container {
  height: 50px;
  width: 400px;
  padding: 0 125px;
  box-sizing: border-box;
  position: relative;
  img {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    padding: 2px;
    width: 50px;
    height: 50px;
    display: block;
    &.active {
      border: 2px solid #f60;
      padding: 1px;
    }
  }
  //定义默认颜色
  .swiper-button-prev,
  .swiper-button-next {
    color: grey;
    &:hover {
      color: skyblue;
    }
  }
  .swiper-button-prev {
    left: 10px;
    &::after {
      content: '\eb0a';
    }
  }
  .swiper-button-next {
    right: 10px;
    &::after {
      content: '\eb09';
    }
  }
  //定义箭头样式
  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-family: iconfont;
    font-weight: 800;
    font-size: 40px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
  }
}
</style>
